<template>
  <span style="font-weight: 700;font-size: 25px;">排行榜</span>
  <div v-if="loading" v-loading="loading" style="width: 100%; height: 400px;" element-loading-text="Loading..."></div>
  <div v-else>
    <el-divider content-position="left">
      <span style="font-weight: 600;">官方榜</span>
    </el-divider>
    <div class="officiallist">
      <div class="officiall_item" v-for="(item, index) in officiallists" :key="index">
        <div class="left" @click="RouterClick(item.id)">
          <PlayCover :pic-url="item.coverImgUrl" :play-count="item.playCount" />
        </div>
        <div class="right" style="margin-left: 20px;">
          <el-table show-header="false" size="small" :data="item.tracks">
            <el-table-column type="index" :index="index +1" />
            <el-table-column show-overflow-tooltip prop="first" label="歌名" width="200" />
            <el-table-column show-overflow-tooltip prop="second" label="歌手" width="200" />
          </el-table>
        </div>
      </div>
    </div>
    <el-divider content-position="left">
      <span style="font-weight: 600;">特色榜</span>
    </el-divider>
    <div class="featuredlist">
      <div class="featuredlist_item" @click="RouterClick(item.id)" v-for="(item, index) in featuredlists" :key="index">
        <PlayCover :pic-url="item.coverImgUrl" :play-count="item.playCount" :name="item.name" />
      </div>
    </div>
  </div>
  
</template>
<script setup lang="ts">
import { ref, onMounted } from "vue"
import { useRouter } from "vue-router";
import PlayCover from '@/components/common/Playlistcover.vue'
import { GetToplistInfo } from "@/api/api.ts"
import type { TopListArray } from "@/models/list"
const officiallists = ref<TopListArray>([])
const featuredlists = ref<TopListArray>([])
const loading = ref(true)
const router = useRouter()
onMounted(() => {
  getToplist()
})
const getToplist = async () => {
  await GetToplistInfo().then(res => {
    featuredlists.value = res.data.list.splice(4)
    officiallists.value = res.data.list
    loading.value = false
  })

}
/* 路由跳转到PlayList歌单详情页面 */
const RouterClick = (id: number) => {
  router.push({ name: 'playlist', query: { id: id } })
}
</script>
<style lang="scss" scoped>
/* 官方榜 */
.officiallist {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  width: 100%;
  margin-bottom: 20px;

  .officiall_item {
    display: flex;
    margin-bottom: 20px;
  }

}

/* 特色榜 */
.featuredlist {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  width: 100%;

  .featuredlist_item {
    padding-bottom: 20px;
    cursor: pointer;
  }

}
</style>
